<!DOCTYPE html>
<html>
<head>
    <title>javascript代理测试</title>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="../JDialog/css/JDialog.css">

	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="dist/AjaxProxy.min.js"></script>
    <script type="text/javascript" src="dist/layer/layer.min.js"></script>
</head>
<body>

<div class="container">
	<div style="padding-top: 10px;">
		<a class="btn btn-primary ajaxproxy" href="action.php"
		   proxy='{"method":"get", "timer":"2000", "formId":"testForm", "callBefore":"callBefore(data);", "callBack":"callBack(data);"}'>
			测试GET方法</a>
	</div>

	<br />
	<form id="testForm" autocomplete="off">
		<div class="form-group">
			<label>Email address</label>
			<input type="text" name="username" id="username" class="form-control" placeholder="用户名"  required>
		</div>
		<div class="form-group">
			<label>Password</label>
			<input type="text" class="form-control" id="password" placeholder="密码" required>
		</div>

		<a class="btn btn-primary ajaxproxy" href="action.php"
		   proxy='{"method":"post", "formId":"testForm", "callBack":"callBack(data);"}'>
			测试POST方法</a>
	</form>
</div>

</body>
<script>

	$('.ajaxproxy').AjaxProxy({
		dataType : "html",
		formCheckHandler : function(formId) {
			if ( $("#username").val().trim() == '' ) {

				layer.msg("请填写用户名", {
					skin : "layui-layer-red",
					offset : 20,
					shift : 6
				});
				return false;

			}
			return true;

		}
	});

    function callBefore() {
        alert('这是callBefore回调函数');
		return true;
    }

    function callBack(data) {
		layer.alert("后端返回的数据："+data);
		return true;
    }

</script>
</html>